<template>
<div class="management-merchant-add views-container">
    <div class="wlm-form">
        <!-- <div class="wlm-form-header">活动信息</div> -->
        <el-menu style="margin:0 0 10px 10px;" default-active="1" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">基本信息</el-menu-item>
            <el-menu-item index="2">联系商家</el-menu-item>
            <el-menu-item index="3">结算费率</el-menu-item>
            <el-menu-item index="4">设置</el-menu-item>
        </el-menu>
        <div class="wlm-form-content" v-show="tabset.basic">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="active" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                        <el-form-item label="商家名称" prop="name">
                            <!-- <el-input v-model.trim="formFormatData.formData.name">
                                <template slot="append">
                                  {{formFormatData.formData.name.length}}/30</template>
                            </el-input> -->
                            <el-input v-model.trim="formFormatData.formData.name" maxlength="30" placeholder="限制30字以内" style="width:80%;"></el-input>
                            <div class="form-help">建议字数{{formFormatData.formData.name.length}}/30</div>
                        </el-form-item>
                        <el-form-item label="商家简介" prop="describe">
                            <!-- <el-input v-model="formFormatData.formData.describe" maxlength="230">
                                <template slot="append">{{formFormatData.formData.describe.length}}/230</template>
                            </el-input> -->
                            <el-input type="textarea" placeholder="请输入商家简介" v-model="formFormatData.formData.describe" style="width:80%;">
                                <!-- <template slot="append">{{formFormatData.formData.describe.length}}/230</template> -->
                            </el-input>
                            <!-- <div class="form-help">一句话介绍商家,限制字数{{formFormatData.formData.describe.length}}/230</div> -->
                        </el-form-item>

                        <el-form-item label="商家分类">
                           <el-select  multiple collapse-tags placeholder="请选择商家分类" v-model="formFormatData.formData.sort_id">
                             <el-option v-for="item in cates" :key="item.sort_name" :value="item.sort_id" :label="item.sort_name" :disabled="item.default==true"></el-option>
                           </el-select>
                        </el-form-item>
                        <el-form-item label="商家LOGO" prop="merchantlog" ref="merchantlog">
                            <choose-files ref="chooseFiles" :config="chooseLogoConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                            <div class="form-help">建议尺寸400*400</div>
                        </el-form-item>
                        <el-form-item label="商家背景图" prop="businessbackgroundmap" ref="businessbackgroundmap">
                            <choose-files ref="chooseFiles" :config="chooseBgConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                            <div class="form-help">建议尺寸1280*840</div>
                        </el-form-item>
                        <el-form-item label="商家资质">
                            <choose-files ref="chooseFiles" :config="choosePlatformConfig" :changeEvt="formFormatFiltersChange"></choose-files>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="wlm-form-content" v-show="tabset.conditions">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="info" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                        <el-form-item label="联系人">
                            <el-input v-model.trim="formFormatData.formData.contacts">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="联系电话">
                            <el-input v-model.trim="formFormatData.formData.telephone">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="微信">
                            <el-input v-model.trim="formFormatData.formData.wechat">
                            </el-input>
                        </el-form-item>
                        <el-form-item label="地址">
                            <el-input v-model.trim="formFormatData.formData.address">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="wlm-form-content" v-show="tabset.commission">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="zko" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                        <el-form-item label="商家结算费率">
                            <el-radio-group v-model="formFormatData.formData.business_settlement">
                                <el-radio :label="1">按平台默认比例</el-radio>
                                <el-radio :label="2">自定义结算比例</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="费率" v-if="formFormatData.formData.business_settlement=='2'">
                            <el-input placeholder="请输入默认结算费率" @blur="notZero(formFormatData.formData,'settlement')" @input.native="clearNativeReg(formFormatData.formData,'settlement',-1,100,0.01)" v-model.trim="formFormatData.formData.settlement">
                                <template slot="append">%</template>
                            </el-input>
                            <p class="form-help">结算抽成比例，例如费率是10%，那么商品卖出100元，商家得90元，平台得10元</p>
                        </el-form-item>
                        <el-form-item label="银行分类">
                            <el-select clearable v-model="formFormatData.formData.bank_id" class="mincheck" placeholder="请选择">
                                <el-option v-for="item in couponData" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="银行卡号">
                            <el-input placeholder="请输入银行卡号" @input.native="clearNativeReg(formFormatData.formData,'bank_num')" v-model.trim="formFormatData.formData.bank_num">
                            </el-input>
                            <!-- <el-input-number  :controls="false" size="small" v-model="formFormatData.formData.bank_num"></el-input-number> -->

                        </el-form-item>
                        <el-form-item label="持卡人姓名">
                            <el-input placeholder="请输入持卡人姓名" v-model.trim="formFormatData.formData.bank_name">
                            </el-input>
                        </el-form-item>
                         <el-form-item label="入账金额冻结天数">
                            <el-input-number :controls="false" placeholder="请输入入账金额冻结天数" :min="0" v-model.trim="formFormatData.formData.settlement_withdrawal_day">
                            </el-input-number>
                            <div class="form-help">注：订单入账后在设置时间内将冻结入账金额，过了此时间解冻方可提现，0代表不设置</div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
        <div class="wlm-form-content" v-show="tabset.setting">
            <div class="wlm-dialog-main">
                <div class="wlm-dialog-content">
                    <el-form ref="set" :model="formFormatData.formData" :rules="formFormatData.rules" size="small" label-width="150px" class="retail-form" label-position="right">
                        <!-- <el-form-item label="是否开启单独数据展示">
                            <el-radio-group v-model="formFormatData.formData.is_open_data">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="0">否</el-radio>
                            </el-radio-group>
                        </el-form-item> -->

                        <!-- <el-form-item label="是否开启商品审核">
                            <el-radio-group v-model="formFormatData.formData.goods_examine">
                                <el-radio :label="1">是</el-radio>
                                <el-radio :label="2">否</el-radio>
                            </el-radio-group>
                        </el-form-item> 
                        alone_examine提现至余额单独设置（1：开启，2：关闭）
balance_cash_out余额提现是否审核（1：需要审核，2：无需审核，3，默认设置）
                        -->
                         
                        <!-- <el-form-item label="展示数据类型" v-if="formFormatData.formData.is_open_data==1">
                            <el-checkbox-group v-model="formFormatData.formData.express_type">
                                <el-checkbox label="3">核销数据</el-checkbox>
                                <el-checkbox label="2">自提数据</el-checkbox>
                                <el-checkbox label="4">门店结算数据</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item> -->
                       <!-- <div v-if="$route.query.money_type==1"> -->
                           <!-- <el-form-item label="系统余额单独设置" > -->
                           <el-form-item label="提现设置" >
                            <el-radio-group v-model="formFormatData.formData.alone_examine" @change="examinebtn">
                                <el-radio :label="1">开启</el-radio>
                                <el-radio :label="2">关闭</el-radio>
                            </el-radio-group>
                            <div class="form-help">提现是否单独设置</div>
                        </el-form-item>
                           <el-form-item label="申请至余额是否审核" v-if="formFormatData.formData.alone_examine==1">
                            <el-radio-group v-model="formFormatData.formData.cash_out_examine">
                                <el-radio :label="1">需要审核</el-radio>
                                <el-radio :label="2">无需审核</el-radio>
                            </el-radio-group>
                            <div class="form-help">微信零钱或银行卡：直接提现是否审核，系统余额：申请余额是否审核</div>
                        </el-form-item>
                        <el-form-item label="余额至零钱是否审核" v-if="formFormatData.formData.alone_examine==1 && money_type==2">
                            <el-radio-group v-model="formFormatData.formData.balance_cash_out">
                                <el-radio :label="1">需要审核</el-radio>
                                <el-radio :label="2">无需审核</el-radio>
                                <el-radio :label="3">默认设置</el-radio>
                            </el-radio-group>
                            <div class="form-help">系统余额提现至微信零钱或银行卡是否审核</div>
                        </el-form-item>
                         <el-form-item label="销售数据是否显示">
                             <el-checkbox-group v-model="formFormatData.formData.sales_data">
                                <el-checkbox label="1">核销数据</el-checkbox>
                                <el-checkbox label="2">自提数据</el-checkbox>
                             </el-checkbox-group>
                        </el-form-item>
                         <el-form-item label="门店信息中商家资质隐藏开关">
                             <el-radio-group v-model="formFormatData.formData.is_bus_qual" style="margin-left:40px;" >
                                <el-radio :label="1">展示</el-radio>
                                <el-radio :label="2">隐藏</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
    <div v-cloak class="wlm-fixed-btn flex-row flex-align-c flex-justify-c">
        <el-button size="small" @click="formFormatSubmit({ router: { type: 'replace', path: '/merchant/business', code: 1 }})" type="primary">保存</el-button>
        <router-link tag="span" to="/merchant/business">
            <el-button size="small">返回</el-button>
        </router-link>
    </div>
</div>
</template>

<script>
import ChooseFiles from '@/components/ChooseFiles/index'
import {
  businessEdit,
  businessGet,
  getBankList,
  getSort,
  getBusiness
} from '@/api/merchant'

import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'BusinessAdd',
  components: {
    ChooseFiles
  },
  computed: {
  },
  created() {
    getBankList({}).then((response) => {
      const {
        data: {
          data: msgData = []
        }
      } = response
      this.couponData = msgData
    })
    this.selectChangeds()
    this.getBusinessbtn()
  },
  data() {
    var checkImg = (rule, value, callback) => {
      const val = this.formFormatData.formData[rule.bindKey]
      const { message } = rule
      if (!Array.isArray(val) || (Array.isArray(val) && val.length === 0)) {
        return callback(new Error(`${message}！~`))
      } else {
        callback()
      }
    }
    return {
      cates: [],
      couponData: [],
      money_type:'',
      tabset: {
        basic: true,
        conditions: false,
        commission: false,
        setting: false
      },
      chooseLogoConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'logo',
          model: 'img',
          validateField: 'merchantlog'
        }
      },
      chooseBgConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 1,
          isMore: true,
          model: 'display'
        },
        isUnique: true,
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'bgimg',
          model: 'img'
        }
      },
      choosePlatformConfig: {
        type: ['image'],
        model: 'display',
        uploadConfig: {
          limit: 5,
          isMore: true,
          model: 'display'
        },
        initList: [],
        isShowList: true,
        file_type: 'image',
        bindKey: {
          key: 'quaimg',
          model: 'img'
          // validateField: 'businessqualification'
        }
      },
      formFormatData: {
        key: ['active', 'info', 'zko', 'set'],
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: businessGet,
            params: {
              id: ''
            },
            filters: {
              img: {
                bindInit: ['chooseLogoConfig', 'chooseBgConfig', 'choosePlatformConfig']
              }
            }
          },
          submitForm: businessEdit
        },
        formData: {
          sort_id: [],
          name: '',
          describe: '',
          express_type: [],
          sales_data:[],
          is_bus_qual:1,
          alone_examine:2,
          balance_cash_out:3,
          is_open_data: 0,
          logo: [],
          bgimg: [],
          quaimg: [],
          contacts: '',
          telephone: '',
          wechat: '',
          address: '',
          settlement: '',
          bank_name: '',
          settlement_withdrawal_day:'',
          bank_num: '',
          bank_id: '',
          business_settlement: 1,
          cash_out_examine: 1,
          goods_examine: 1
        },
        rules: {
          name: [{
            required: true,
            message: '请输入商家名称',
            trigger: 'blur'
          }],
          bank_name: [{
            required: true,
            message: '请输入持卡人姓名',
            trigger: 'blur'
          }],
          describe: [{
            required: true,
            message: '请输入商家介绍',
            trigger: 'blur'
          }],
          merchantlog: [{
            required: true,
            bindKey: 'logo',
            message: '请上传商家LOGO~!',
            validator: checkImg,
            trigger: 'change'
          }]
        }
      }
    }
  },
  methods: {
    getBusinessbtn(){
      getBusiness({always: true}).then(res=>{
        console.log("sssssssssssssssss",res)
        this.money_type = res.data.data.money_type
      })
    },
    examinebtn(){
      if(this.formFormatData.formData.alone_examine==2){
        this.formFormatData.formData.cash_out_examine=1
        // this.$route.params
      //  this.$route.query
      }
    },
    handleSelect(key, keyPath) {
      let i = 1
      for (const item of Object.keys(this.tabset)) {
        if (i === Number(key)) {
          this.tabset[item] = true
        } else {
          this.tabset[item] = false
        }
        i++
      }
    },
    selectChangeds() {
      getSort().then(res => {
        this.cates = res.data.data
        console.log(' this.cates', this.cates)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.management-merchant-add {
    .logo {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 6px;
    }

}
</style>
